<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link type="text/css" rel="stylesheet" href="/webjars/bootstrap/3.3.7/css/bootstrap.css">
    <script type="text/javascript" src="/webjars/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="/webjars/vue/2.6.10/dist/vue.js"></script>
    <script type="text/javascript" src="/webjars/axios/0.19.0/dist/axios.js"></script>
    <script type="text/javascript" src="/webjars/bootstrap/3.3.7/js/bootstrap.js"></script>
    <script>Vue.config.productionTip=false</script>
</head>
<body>
<div id="vuebox">
    <div class="row">
        <div class="col-md-6">
            <form class="form-inline" role="form" style="padding-left: 250px;">
                <div class="form-group" style="padding-left: 20px;">
                    <label>请输入查询关键字:</label>
                    <input v-model="title"  type="text" class="form-control">
                    <!--<select class="form-control" v-model="categoryid">
                        <option value="0">全部</option>
                        <option v-for="item in categoryList.data" :value="item.id">{{item.name}}</option>
                    </select>-->
                </div>
                <div class="form-group"  style="padding-left: 20px;">
                    <button type="button" class="btn btn-primary" @click="selectFaqs()">查询</button>
                </div>

            </form>
        </div>
        <div class="col-md-4 text-right">
            <a @click="showModal()" class="btn btn-primary">添加常见信息</a>
        </div>
    </div>
    <br>
    <table class="table table-bordered container">
        <thead>
        <tr>
            <th>编号</th>
            <th>标题</th>
            <th>分类</th>
            <th>创建时间</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="item in faqsList.data">
            <td>{{item.id}}</td>
            <td><a @click="updateEntry(item.id)">{{item.title}}</a></td>
            <td>{{item.cname}}</td>
            <td>{{item.createdate}}</td>
        </tr>
        </tbody>
    </table>

    <br>


    <!--模态框-->
    <div class="modal" id="mymodal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" type="button" >&times;</button>
                    <div class="modal-title">
                        添加常见问题
                    </div>
                </div>
                <div class="modal-body">
                    <form class="form-horizontal" role="form">
                        <div class="form-group">
                            <label for="classId" class="col-sm-2 control-label">分类:</label>
                            <div class="col-sm-10">
                                <select id="classId" class="form-control" v-model="new_faqs.classid">
                                    <option value="0">请选择分类</option>
                                    <option v-for="item in classList.data" :value="item.id">{{item.cname}}</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="title" class="col-sm-2 control-label">标题:</label>
                            <div class="col-sm-10">
                                <input v-model="new_faqs.title" id="title" type="text" class="form-control" placeholder="请输入标题">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="content" class="col-sm-2 control-label">详细内容:</label>
                            <div class="col-sm-10">
                                <input v-model="new_faqs.content" id="content" type="text" class="form-control" placeholder="请输入详细内容">
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-default" @click="hideModal(),clearForm()">关闭</button>
                    <button class="btn btn-primary" @click="saveModal()">保存</button>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script type="text/javascript">
var vm=new Vue({
    el:"#vuebox",
    data:{
        faqsList:[],
        title:"",
        new_faqs:{classid:'0',title:'',content:''},
        classList:[],
        saveResult:{}
    },
    mounted(){
        axios.get("/selectClass").then(res=>this.classList=res.data)
        this.selectFaqs();
    },
    methods: {
        selectFaqs: function () {
            axios({url:"/selectFaqs", method:"post",
                params:{title:this.title}})
                .then(res=>{this.faqsList=res.data})
        },
        showModal: function () {
            $('#mymodal').modal('show');
        },
        hideModal: function () {
            $('#mymodal').modal('hide');
        },
        clearForm: function () {
            $('#classId').val(0);
            $('#title').val('');
            $('#content').val('');
        },
        saveModal:function () {
            axios.post("/saveFaqs",this.new_faqs).then(res=>{
                this.saveResult=res.data;
                if (this.saveResult.result == 'SUCCESS') {
                    this.selectFaqs(1);
                    this.hideModal();
                    this.clearForm();
                } else {
                    alert(this.saveResult.message)
                }
            })
        },
        updateEntry:function (id) {
            axios.get("/getFaqsById",{params:{id:id}}).then(res=>{
                this.new_faqs=res.data.data;
                this.showModal();
            })
        }

    }
});
</script>